<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>大数据201</title>
	<link rel="icon" href="static/img/iocn.png">
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
            text-decoration: none;
            /*background-color: #eaedf1;*/
        }
        section nav{
            text-align: center;
            height: 50px;
            background-color: rgb(238, 244, 249);
            line-height: 50px;

        }
        section nav a{
            padding: 50px;
        }
        body{
            background-color: #eaedf1;
        }
        main{
            position: relative;
            width: 80%;
            margin: 0 auto;
        }
        table{
            width: 100%;
            border-collapse: collapse;
        }

        table caption{
            font-size: 2em;
            font-weight: bold;
            margin: 1em 0;
        }

        th,td{
            border: 1px solid #999;
            text-align: center;
            padding: 20px 0;
        }

        table thead tr{
            background-color: #008c8c;
            color: #fff;
        }

        table tbody tr:nth-child(odd){
            background-color: #eee;
        }

        table tbody tr:hover{
            background-color: #ccc;
        }

        table tbody tr td:first-child{
            color: #f40;
        }

        table tfoot tr td{
            text-align: right;
            padding-right: 20px;
        }

        form>input{
            display: none;
        }
        form>label{
            position: relative;
            margin-right: 34px;
        }
        form>label::before{
            display: inline-block;
            content: "";
            width: 16px;
            height: 16px;
            border-radius: 50%;
            border: 1px solid rgb(219, 219, 219);
            margin-right: 6px;
            vertical-align: bottom;
        }
        form>input:checked+label::before{
            background-color: rgb(239, 66, 56);
        }
        form>input:checked+label::after{
            display: inline-block;
            content: "";
            width: 6px;
            height: 6px;
            border-radius: 50%;
            position: absolute;
            left: 6px;
            bottom: 6px;
            background-color: white;
        }
        .radio_type {
            width: 30px;
            height: 30px;
            /*appearance: none;*/
            position: relative;
            outline: none;
        }
        .radio_type:before {
            content: "";
            width: 28px;
            height: 28px;
            border: 1px solid #41BEAE;
            display: inline-block;
            border-radius: 50%;
            vertical-align: middle;
            background: white;
        }
        .radio_type:checked:after {
            content: "";
            width: 22px;
            height: 21px;
            text-align: center;
            background: #41BEAE;
            border-radius: 50%;
            display: block;
            position: absolute;
            top: 4px;
            left: 4px;
        }


    </style>
</head>
<body>

	<section>
		<nav>
			<a href="/index">首页</a>
			<a href="/bar">柱状图</a>
			<a href="/add">组合</a>
			<a href="/map">地图</a>
			<a href="/web">网站建设</a>
		</nav>
    </section>
    <main>
        <form action = "/index" method = "POST">
         <p>分类：
            {% for fenlei in fenleis %}
                <input type = "radio" class="radio_type" name = "fenlei" value="{{ fenlei }}"/>{{ fenlei }}
            {% endfor %}
         </p>
         <p>城市：
             {% for city in citys %}
                <input type = "radio" class="radio_type" name = "city" value="{{ city }}"/>{{ city }}
             {% endfor %}
         </p>

         <p><input type = "submit" value = "提交" /></p>
      </form>

        <div class="container table-responsive">
            <table class="table text-nowrap">
                <caption>{{ head }}</caption>
                <thead>
                    <tr class="text-center">
                        <td>指标</td>
                        <td>单位</td>
                        <td>省份</td>
                        <td>2021</td>
                        <td>2020</td>
                        <td>2019</td>
                        <td>2018</td>
                        <td>2017</td>
                        <td>2016</td>
                        <td>2015</td>
                        <td>2014</td>
                        <td>2013</td>
                        <td>2012</td>
                    </tr>
                </thead>
                {% for index,data in datalist %}
                    <tr>
                        <td>{{ data['industry'] }}</td>
                        <td>{{ data['unit'] }}</td>
                        <td>{{ data['city'] }}</td>
                        <td>{{ data['list_2021'] }}</td>
                        <td>{{ data['list_2020'] }}</td>
                        <td>{{ data['list_2019'] }}</td>
                        <td>{{ data['list_2018'] }}</td>
                        <td>{{ data['list_2017'] }}</td>
                        <td>{{ data['list_2016'] }}</td>
                        <td>{{ data['list_2015'] }}</td>
                        <td>{{ data['list_2014'] }}</td>
                        <td>{{ data['list_2013'] }}</td>
                        <td>{{ data['list_2012'] }}</td>
                    </tr>
                {% endfor %}

            </table>
        </div>
    </main>
</body>

</html>